<!-- 2023年4月17日 16点55分 gpd 动态内容 -->
<template>
	<view class="TrendContent">
		<view class="TrendContent_head" >
			<img :src='`{{avatarUrl}}`' alt="" style="border-radius: 100%;width: 50px;height: 50px;float: left;" @click="toTrendManage">
			<!-- <u-button style="width: 90vw;height: 8vh;margin-left: 200rpx;margin-top: 6rpx;float: left;" @click="publish()" type="primary" color="linear-gradient(to right, rgb(254,132,0), rgb(254,87,0))" shape="circle" text="发布" ></u-button> 	 -->
			<img style="width:70rpx;height:70rpx;margin-left: 70%;margin-top:20rpx;float: left;" src="/static/相机.png" @click="publish()" >
		</view>
		<!-- 动态内容主体 -->
		<view class="TrendContent_body">
			<view class="TrendContent_div" v-for="item in userTrendsList" :key="item.id">
				<img @click="toTrendDetails(item.id)" :src='`http://101.43.223.224:8765/image/getImageById?id=${item.pictureGroup[0]}`' style="height: 220px;width: 100%;border-radius: 30rpx 30rpx 0rpx 0rpx;background-size: contain;">
				<p @click="toTrendDetails(item.id)"	style="font-size: 12px;font-weight: bold;margin-top: 2%;margin-left: 6%;">{{item.trendTitle}}</p>
				<view>
					<img :src='item.avatarUrl' style="border-radius: 100%;width: 60rpx;height: 60rpx;float: left;margin-left: 6%;">
					<p style="margin-left: 2%;margin-top: 6%;color: ##999999;font-size: 12px;font-weight: bold;float: left;">{{item.userName}}</p>
					<view style="width:20px;float: left;margin-top: 6%;margin-left: 40%;">
						<u-icon v-if="item.thumbFlag == 0" @click="ThumbsUpState(item)" name="heart" style="float: left;"></u-icon>
						<u-icon v-if="item.thumbFlag == 1" @click="noThumbsUpState(item)" name="heart-fill" style="float: left;"></u-icon>
					</view>
					<span style="color: #B4B2B5;font-size: 12px;float: left;margin-top: 6%;">{{item.likes}}</span>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 存放登录成功后的结果
				user:'',
				// 存放登录成功后的用户id
				userId:'',
				// 存放登录成功后的用户昵称
				nickName:'',
				// 存放登录成功后的图片路径和id
				avatarUrl:'',
				// 存放登录成功后的token
				token:'',
				// 查询用户的动态结果
				userTrendsList:'',
			}
		},
		methods:{
			//跳转至动态内容详情页面
			toTrendDetails(id){
				uni.navigateTo({
					url:"/pages/trend/TrendDetails?id="+id
				})
			},
			// 查询用户发布的动态内容
			getUserTrends(){
				this.$myRequest({
					url:'/trends/getUserTrends',
					data:{
						userId:this.userId,
					}
				}).then(res=>{
					this.userTrendsList = res.data.data
					this.userTrendsList.forEach(item=>{
						if(item.pictureGroup!='')
							item.pictureGroup  = item.pictureGroup.split(',')
					})
				})
			},
			// 跳转发布动态页面
			publish(){
				uni.navigateTo({
					url:'/pages/trend/AddTrend'
				})
			},
			// 用户点赞
			ThumbsUpState(item){
				this.$myRequest({
					url:'/trends/thumbsUpState',
					data:{
						userId:this.userId,
						trendId:item.id
					},
					method:"POST",
					dataType:'json'
				}).then(res=>{
					uni.showToast({
						title: '点赞成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					// 刷新
					this.getUserTrends()
				})
			},
			// 取消点赞
			noThumbsUpState(item){
				this.$myRequest({
					url:'/trends/noThumbsUpState',
					method: 'delete',
					data: {
						userId:this.userId,
						trendId:item.id
					},
					dataType:'json'
				}).then(res=>{
					uni.showToast({
						title: '取消点赞成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					// 刷新
					this.getUserTrends()
				})
			},
			// 跳转动态内容管理页面
			toTrendManage(){
				uni.navigateTo({
					url:"/pages/trend/TrendManage"
				})
			},
		},
		onLoad() {
			this.user = wx.getStorageSync("user")
			this.token = wx.getStorageSync("token")
			this.userId = this.user.id
			this.nickName = this.user.nickName
			this.avatarUrl = this.user.avatarUrl
			// 初始化查询用户发布的动态内容
			this.getUserTrends()
		},
		onShow() {
			// 初始化查询用户发布的动态内容
			this.getUserTrends()
		}
	}
</script>

<style>
	.TrendContent{
		width: 100%;
		height: 1870px;
		background-color: #E4E4E4;
		overflow: hidden;
	}
	.TrendContent_head{
		margin-top: 10px;
		width: 100%;
		height: 50px;
	}
	.TrendContent_body{
		width: 100%;
		height: 800px;
		margin-top: 2%;
	}
	.TrendContent_div{
		width: 46%;
		height: 36%;
		margin-left: 2%;
		background-color: white;
		border-radius: 30rpx;
		margin-top: 3%;
		float: left;
	}
</style>